import React, { Component } from 'react'
import { Button, Col, Input, Row } from 'antd'
import '../../less/index.less'
import { TwsReactMarkdownPreview } from 'tws-antd'
import { convertContent } from '../../constant/lang-util'
import { FormattedMessage } from 'react-intl'

export default class AnswerSubmitBox extends Component {
  render () {
    const {loading, userAnswerRepo, branch, quiz} = this.props
    const {templateRepository, userAnswer} = quiz
    const isFinished = userAnswer !== ''

    const unSubmitted = <div className='margin-t-2 mark-down-wrap'>
      <TwsReactMarkdownPreview
        source={convertContent('编程题模板库地址') + '：' + templateRepository} />
      <div style={{background: 'white', margin: '-7px 0px 0px 0px'}}>
        <Row>
          <Col span={10} className='margin-l-2'>
            <Input
              addonBefore={<FormattedMessage id='git仓库地址' />}
              value={userAnswerRepo}
              onChange={e => this.props.setUserAnswerRepo(e.target.value)}
              />
          </Col>
        </Row>
        <Row>
          <Col span={10} className='margin-t-2 margin-l-2'>
            <Input
              addonBefore={<FormattedMessage id='git仓库分支' />}
              value={branch}
              placeholder={convertContent('默认master')}
              onChange={e => this.props.setBranch(e.target.value)}
              />
          </Col>
        </Row>
        <Row>
          <Col className='margin-t-2 margin-l-2 margin-b-1'>
            <Button style={{width: 250}} loading={loading}
              onClick={() => this.props.submit()}><FormattedMessage id='提交代码地址' /></Button>
          </Col>
        </Row>
      </div>
      {this.props.needRunScript() ? this.props.getRunningResult() : ''}
    </div>
    const submitted = this.props.preview
        ? <a href={userAnswerRepo} target='_blank'>{userAnswerRepo}</a>
        : <div className='margin-t-2 mark-down-wrap'>
          <TwsReactMarkdownPreview
            source={convertContent('编程题模板库地址') + '：' + templateRepository} />
          <div style={{background: 'white', margin: '-7px 0px 0px 0px'}}>
            <Row>
              <Col span={10} className='margin-l-2'>
                <Input addonBefore={<FormattedMessage id='git仓库地址' />}
                  value={userAnswerRepo}
                  onChange={e => this.props.setUserAnswerRepo(e.target.value)} />
              </Col>
            </Row>
            <Row>
              <Col span={10} className='margin-t-2 margin-l-2'>
                <Input addonBefore={<FormattedMessage id='git仓库分支' />} value={branch}
                  onChange={e => this.props.setBranch(e.target.value)} />
              </Col>
            </Row>
            <Row>
              <Col className='margin-t-2 margin-l-2 margin-b-1'>
                <Button style={{width: 250}} loading={loading}
                  onClick={() => this.props.submit()}>
                  <FormattedMessage id='再次提交代码' /></Button>
              </Col>
            </Row>
          </div>
          {this.props.needRunScript() ? this.props.getRunningResult() : ''}
        </div>

    return isFinished ? submitted : unSubmitted
  }
}
